<template>
  <div>
    <el-container>
      <el-main id="mainScreen">
        <!--        操作栏-->
        <div>
          <el-button type="primary" @click="add">新增产品线</el-button>
          <el-input placeholder="请输入内容" v-model="searchData" style="width: 25%" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
          <el-button type="text" size="large" @click="del()">
            <el-popover placement="top-start" trigger="hover" content="删除选中行">
              <font-awesome-icon :icon="['far', 'trash-alt']" slot="reference" size="2x"></font-awesome-icon>
            </el-popover>
          </el-button>
          <el-button @click="refreshClick()" type="text" size="large">
            <el-popover placement="top-start" trigger="hover" content="刷新页面">
              <font-awesome-icon :icon="['fas', 'sync-alt']" slot="reference" size="2x"></font-awesome-icon>
            </el-popover>
          </el-button>
          <el-button type="text" size="large">
            <ScreenFull></ScreenFull>
          </el-button>
        </div>
        <!--        表格主体-->
        <div>
          <el-tabs  type="card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first">
              <Main :productLines="productLines" ref="main" @handleSelection="handleSelection"></Main>
            </el-tab-pane>
            <el-tab-pane label="启用" name="second">
              <Main :productLines="productLines" ref="main" @handleSelection="handleSelection"></Main>
            </el-tab-pane>
            <el-tab-pane label="禁用" name="third">
              <Main :productLines="productLines" ref="main" @handleSelection="handleSelection"></Main>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!--       分页条-->
        <div class="block">
          <el-pagination
            :hide-on-single-page="hidePage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size.sync="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
    <!--    新增产品线组件-->
    <el-dialog title="新增产品线" :visible.sync="addDialogVisible" width="50%" v-if="refresh">
      <div>
        <Add  @conserve="conserve" @close="close"></Add>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//导入子组件
import Main from "./product_line/main";
import Add from "./product_line/add";
import ScreenFull from "../screenFull";

export default {
  name: "productLine",
  inject:['reload'],  //注入inject依赖提供刷新
  components:{
    ScreenFull,
    Main,
    Add
  },
  data() {
    return {
      productLines: [],
      temp: null,
      addDialogVisible:false,
      refresh:false,
      date:new Date(),
      //状态：显示全部、启用、禁用
      status:-1,
      hidePage:true,
      activeName: 'first',
      currentPage: 1,
      limit:10,
      total:0,
      searchData:'',
      multipleSelection:[],
      //记录删除多个数据的id，后台删除
      delId:[],
      //记录删除多个数据的index，前台删除
      delIndex:[],
    }
  },
  created() {
    //重置页码和分页数
    this.currentPage = 1;
    this.limit = 10;
    this.hidePage = true;
    this.status = -1;
    this.axios.get(this.baseUrl+"productLine/all/"+this.currentPage+"/"+this.limit+"/"+this.status)
      .then(res=>{
        console.log(res.data);
        this.productLines = res.data.data.list;
        this.total = res.data.data.total
      });
  },
  methods: {
    /*handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },*/
    handleClick(tab, event) {
      console.log(tab.index)
      //重置页码和分页数
      this.currentPage = 1;
      this.limit = 10;
      this.hidePage = true;
      if(tab.index == 0){
        //重置页码和分页数
        this.status = -1;
        console.log("全部")
        this.axios.get(this.baseUrl+"productLine/all/"+this.currentPage+"/"+this.limit+"/"+this.status)
          .then(res=>{
            console.log(res.data);
            this.productLines = res.data.data.list;
            this.total = res.data.data.total
          });
      }else if(tab.index == 1){
        this.status = 1;
        console.log("启用")
        this.axios.get(this.baseUrl+"productLine/all/"+this.currentPage+"/"+this.limit+"/"+this.status)
          .then(res=>{
            console.log(res.data);
            this.productLines = res.data.data.list;
            this.total = res.data.data.total
          });
      }else{
        //重置页码和分页数
        this.status = 0;
        console.log("禁用")
        this.axios.get(this.baseUrl+"productLine/all/"+this.currentPage+"/"+this.limit+"/"+this.status)
          .then(res=>{
            console.log(res.data);
            this.productLines = res.data.data.list;
            this.total = res.data.data.total
          });
      }
    },
    //新增
    add(){
      this.refresh = true;
      this.addDialogVisible = true
    },
    //保存新增
    conserve(productLine){
      console.log(productLine);
      this.axios.post(this.baseUrl+"productLine/insert",productLine)
        .then(res=>{
          console.log(res.data);
          if("success"===res.data.message){
            //刷新，重新请求数据
            this.reload();
            this.$message({
              type: 'success',
              message: res.data.data
            });
          }else {
            this.$message({
              type: 'warning',
              message: res.data.data
            });
          }
        });
      this.refresh = false;
      this.addDialogVisible = false;
    },
    //退出新增
    close(){
      this.$confirm('此操作会清空当前所做的修改，请确定是否继续退出？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //关闭对话框
        this.addDialogVisible = false;
        //销毁对话框
        this.refresh = false;
        //
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //选中的多行数据
    handleSelection(multipleSelection){
      this.multipleSelection = multipleSelection;
      this.$emit("handleSelection",this.multipleSelection)
    },
    //删除多条
    del(){
      console.log(this.multipleSelection)
      if(this.multipleSelection.length !== 0){
        this.$confirm('将删除全部所选中行，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //遍历两个数组，删除相同元素（即被选中的元素）
          for (let i = 0; i < this.productLines.length; i++) {
            for (let j = 0; j < this.multipleSelection.length; j++) {
              if(this.productLines[i].id === this.multipleSelection[j].id){
                //将所需删除元素的index存入数组delIndex
                this.delIndex.push(i);
                //将所需删除元素的id存入数组delId
                this.delId.push(this.productLines[i].id);
              }
            }
          }
          //删除后台数据
          console.log("删除")
          this.axios.delete(this.baseUrl+"productLine/del/"+this.delId.toString())
            .then(res=>{
              console.log(res.data);
              if("success"===res.data.message){
                this.$message({
                  type: 'success',
                  message: res.data.data
                });
              }else {
                this.$message({
                  type: 'warning',
                  message: res.data.data
                });
              }
            });
          //删除前台数据，反向遍历delIndex
          for (let i = this.delIndex.length - 1; i >= 0; i--) {
            this.productLines.splice(this.delIndex[i], 1)
          }
          //刷新页面
          this.reload();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }else{
        this.$alert('未选中数据！请选择所需删除的行之后重试！', '警告', {
          confirmButtonText: '确定',
        });
      }
    },
    //搜索
    search(){
    },
    //刷新
    refreshClick(){
      this.reload();
    },
    //分页数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //更改条数
      this.limit = val;
      //如果不为10，不隐藏条码
      if(val !== 10){
        this.hidePage = false;
      }
      //重置页码为1
      this.currentPage = 1;
      console.log(this.currentPage)
      this.axios.get(this.baseUrl+"productLine/all/"+this.currentPage+"/"+this.limit+"/"+this.status)
        .then(res=>{
          console.log(res.data);
          this.productLines = res.data.data.list;
          this.total = res.data.data.total
        });
    },
    //切换当前页
    handleCurrentChange(val) {
      console.log("当前页："+val);
      this.currentPage = val;
      this.axios.get(this.baseUrl+"productLine/all/"+this.currentPage+"/"+this.limit+"/"+this.status)
        .then(res=>{
          console.log(res.data);
          this.productLines = res.data.data.list;
          this.total = res.data.data.total
        });
    }
  }
}
</script>

<style scoped lang="less">
@import "../../assets/css/element-ui.css";
</style>

